<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
    <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.js"></script>
  </head>
  <style>
    td {
      text-align: center;
    }
  </style>
  <body>
    <!-- <div id="con" class="div-con">12312312</div>
    <div id="con1" class="div-con">
      <div class="classname">1</div>
      <div>2</div>
      <div>3</div>
      <p class="classname">ppp</p>
      <div class="classname">4</div>
    </div>
    <span>sajkhj</span>
    <div class="classname">5</div>
    <h1>sssssssssssssssssss</h1>
    <ul>
      <li style="display: none">0</li>
      <li style="opacity: 0">1</li>
      <li>2</li>
      <li>3</li>
      <li><i>123</i></li>
      <li id="name1"><span id="test">555</span>5</li>
      <li></li>
    </ul>
    <input type="hidden" />
    <input type="text" id="username" name="woman" />
    <input type="text" disabled />
    <input type="checkbox" name="" id="" checked />
    <input type="checkbox" name="" id="" />
    <input type="checkbox" name="" id="" checked />
    <input type="checkbox" name="" id="" /> -->
    <!-- <select name="" id="se">
      <option value="11111">1</option>
      <option value="22222">2</option>
      <option value="33333">3</option>
      <option value="44444">4</option>
    </select> -->

    姓名：<input type="text" id="txt" /> <br />年龄：<input
      type="text"
      id="txt"
    /><br />
    电话：<input type="text" id="txt" /><br />
    邮箱：<input type="text" id="txt" /><br />
    性别：<input type="text" id="txt" /><br />
    民族：<input type="text" id="txt" /><br />
    <button id="sub">提交</button>
    <hr />

    <table border="1" style="width: 700px">
      <thead>
        <tr>
          <th>姓名</th>
          <th>年龄</th>
          <th>电话</th>
          <th>邮箱</th>
          <th>性别</th>
          <th>民族</th>
          <th>操作</th>
        </tr>
      </thead>
      <body>
        <tr>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td>123</td>
          <td><a href="">编辑</a> | <a href="">删除</a></td>
        </tr>
      </body>
    </table>
  </body>
  <script>
    // console.log($('#con'))
    // console.log($('.classname'))
    // console.log($('div'))
    // console.log($('#con1,p,h1'))
    // console.log($('#con1>.classname'))
    // $('#con1>.classname').html(9999)
    // $('#con1 .classname').html(8888)
    // console.log($('span+.classname').html())
    // console.log($('span ~ div'))
    // console.log($('div[class="classname"]:first'))
    // console.log($('.classname:last'))
    // console.log($('li:odd'))
    // console.log($('li:even'))
    // console.log($('li').eq(3))
    // console.log($('li').not('#name1'))
    // console.log($('li').odd())
    // console.log($(".classname:contains('4')"))
    // console.log($('li:empty'))
    // console.log($('li:has("#test")'))
    // console.log($('li:parent'))
    // console.log($('li:hidden'))
    // console.log($('input:hidden'))
    // console.log($('li:visible'))
    // console.log($('li[style]'))
    // console.log($('li[style$="0"]'))
    // console.log($('div[id*="1"]'))
    // console.log($('input:disabled'))
    // console.log($('input:checked'))
    // console.log($('input:checked'))
    var num = 1
    $(function () {
      //   $('#se').change(function () {
      //     console.log($('option:selected'))
      //   })
      $('#sub').click(function () {
        if ($('#txt').val()) {
          var con = $('#con').val() ? $('#con').val() + '\n' : ''
          $('#con').val(con + num++ + ':' + $('#txt').val())
        }
      })
    })
  </script>
</html>
